import React from 'react'
import type { FormProps } from 'antd'
import './Login.scss'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Checkbox, Form, Input, message } from 'antd'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
export default function Login() {
  const navigate = useNavigate()
  const onFinish: FormProps['onFinish'] = (values) => {
    console.log('Success:', values)
    axios
      .get(`/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`)
      .then((res) => {
        if (res.data.length > 0) {
          localStorage.setItem('token', JSON.stringify(res.data[0]))
          navigate('/')
        } else {
          message.error('用户名或者密码不对！')
        }
      })
  }

  const onFinishFailed: FormProps['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <div style={{ background: 'rgb(35,39,65)', height: '100vh' }}>
      <div className="formContainer">
        <div className="title">全球新闻发布管理系统</div>
        <Form
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item name="username" rules={[{ required: true, message: 'Please input your Username!' }]}>
            <Input prefix={<UserOutlined />} placeholder="Username" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
            <Input prefix={<LockOutlined />} type="password" placeholder="Password" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
